<template>
	<view v-if="house_info">
		<view class="page-foot bgf">
			<view class="footbox">
				<button @tap="bindPhoneCall" :data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel" class="contactkefu flex-box flex-between">
					<image src="/static/icon/icon_kefubg.png" class="kefubg"></image>
					<view class="tl">
						<view class="fs40 pb10">{{ house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel }}</view>
						<view class="fs24">拨打热线，免费提供专属楼盘分析</view>
					</view>
					<image src="/static/icon/icon_tel.png" class="tel"></image>
				</button>
			</view>
		</view>
		<view class="container">
			<view class="swiper-box">
				<view class="house-ban" v-if="bid == 1">
					<image @tap="lookVideo(1)" :src="house_info.video_one.substring(0,4)=='http'?house_info.video_one:domain+house_info.video_one"></image>
				</view>
				
				<view class="house-ban" v-if="bid == 5">
					<swiper class="swiper" circular @change="swiperChange" interval="5000"
						duration="500" @tap="jumpToImgShow">
						<swiper-item v-for="(item, index) in house_info.images_arr" :key="index">
							<image :src="item" class="index_bg" mode=""></image>
							<text>{{item}}</text>
						</swiper-item>
					</swiper>
					<view class="swipernum">{{ swiperCurrent + 1 }}/{{ house_info.images_arr.length }}</view>
				</view>
				<view class="house-ban" v-if="bid == 2">
					<image @tap="previewImgTop" :data-url="house_info.area_map" :src="house_info.area_map"></image>
				</view>
				<view class="house-ban" v-if="bid == 3">
					<image @tap="previewImgTop" :data-url="house_info.build_image" :src="house_info.build_image"></image>
				</view>
					
				<view class="swiper-btns">
					<view class="btn-itm" :class="{'btn-act':item.id==bid}" v-for="(item,index) in swiperBtns" :key="index" @click="btnTap(item)">{{item.title}}</view>
				</view>
			</view>


			<view class="buildinfo">
				<view class="flex-box flex-between title_collect">
					<view>
						<view class="title fwb">{{ house_info.name }}{{house_info.subtitle?house_info.subtitle:'' }}</view>
						<view class="sale_type1">{{ house_info.sale_state_text }}</view>
						<view class="sale_type2">{{house_info.housetype? house_info.housetype.name:'' }}</view>
					</view>
					<view class="collect" @tap="collect">
						<image :src="'/static/icon/icon_collect' + (house_info.is_collect ? '-on' : '') + '.png'"
							class="icon_collect"></image>
						<view>收藏</view>
					</view>
				</view>
				
				<view class="info">
					<view class="flex infoitem">
						<view class="infoleft">参考均价</view>
						<view class="price fwb">
							<view v-for="(item,index) in house_info.other_housing_prices" :key="index">{{item.value+item.name}}</view>
						</view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">参考总价</view>
						<view class="price fwb">{{ house_info.all_total_price }}<text>万/套</text></view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">建筑面积</view>
						<view class="price fwb">{{ house_info.min_space }}<text>/㎡</text></view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">户型格局</view>
						<view>{{ house_info.list_labels }}</view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">开盘时间</view>
						<view>{{ house_info.opentime_text }}</view>
					</view>
					<view v-if="house_info.cert_trends_newinfo" class="flex infoitem">
						<view class="infoleft">售卖许可证</view>
						<view>{{ house_info.cert_trends_newinfo.name }}</view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">开发企业</view>
						<view>{{ house_info.developers }}</view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">项目地址</view>
						<view>{{ house_info.region }}-{{ house_info.street }} {{ house_info.addr }}</view>
					</view>
					<view class="flex infoitem">
						<view class="infoleft">售楼地址</view>
						<view class="flex-grow-1">{{ house_info.discounts}}
						</view>
					</view>
				</view>
				
				<view @tap="jumpToDetailMore" hover-class="none" class="showdetail">
					查看楼盘详细信息</view>
				<template v-for="(item, index) in rank_data">

					<navigator :url="'/pages/house/rank/rank?region=' + item.rank_area + '&rank_type=' + item.rank_type"
						class="hotsale flex-box" hover-class="none">
						<view class="bang">榜</view>
						<view class="flex-grow-1">
							{{ item.rank_area }}{{ item.rank_type_text }}楼盘榜第{{ item.rank_number }}名
						</view>
						<image src="/static/icon/icon_close-r.png" class="icon_r"></image>
					</navigator>
				</template>
			</view>

			<view v-if="broker_data.length > 0" class="agentbox">
				<view class="flex-box flex-between title">
					<view class="fs34 fwb">推荐置业顾问</view>
				</view>
				<view
					class="flex-box flex-between contact" v-for="(item, index) in broker_data" :key="index">
					<navigator class="flex-box flex-grow-1"  :url="'/pages/broker/consultant_detail/consultant_detail?id=' + item.user.id">
						<image :src="item.user.avatar" class="icon_avatar" mode="aspectFill"></image>
						<view class="flex-grow-1">
							<view class="fs30 pb10">{{ item.user.nickname }}</view>
							<view class="fs24 col89 m-ellipsis-l2">{{ item.user.bio }}</view>
						</view>
					</navigator>
					<view class="flex-box">
						<button @tap.stop.prevent="bindPhoneCall" :data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel" class="conbtn"
							hover-class="none">
							<image src="/static/icon/icon_tel.png"></image>
						</button>
					</view>
				</view>
			</view>


			<view class="housetype">
				<template v-if="layout_info.layout_count > 0">
					<view class="flex-box flex-between title">
						<view class="fs34 fwb">户型({{ layout_info.layout_count }})</view>
						<!-- <navigator class="navigator" hover-class="none"
							:url="'/pages/house/house_type/house_type?house_id=' + house_info.id">更多+
						</navigator> -->
					</view>
					<view class="typelist">
						<view class="typeitem flex" v-for="(item, index) in layout_info.layout_data" :key="index">
							<view class="imgebox" @click="previewImghx(item)">
								<image v-if="'item.images_arr.length>0'" :lazy-load="true" :src="item.images_arr[0]"
									mode="aspectFill"></image>
								<image v-else :lazy-load="true" src="" mode="aspectFill"></image>
							</view>
							<view class="flex-grow-1">
								<view class="flex-box flex-between pb20">
									<view>{{ item.name }}</view>
									<view class="sale_type1">{{ item.sale_state_text }}</view>
								</view>
								<view class="fs24 col89 pb10">建面：{{ item.space }}㎡</view>
								<view class="compete">参考总价：<text>约</text><text
										class="fs34">{{ item.total_price }}万</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<view class="flex-box flex-between title" v-if="article">
					<view class="fs34 fwb">楼盘资讯</view>
				</view>
				<view class="flex" style="padding-bottom:40rpx;" v-if="article">
					<view class="flex-grow-1">
						<view class="introduce">
							<u-parse :content="article"></u-parse>
						</view>
					</view>
				</view>
				
				<template v-if="building_info.building_count>0">
					<view class="flex-box flex-between title">
						<view class="fs34 fwb">楼栋信息({{ building_info.building_count }})</view>
						<navigator :url="'/pages/house/build_info/build_info?house_id=' + id" class="navigator"
							hover-class="none">更多+</navigator>
					</view>
					<navigator :url="'/pages/house/build_info/build_info?house_id=' + id" class="infopic">
						<image :lazy-load="true" :src="building_info.building_image" mode="aspectFill"></image>
					</navigator>
				</template>
			</view>

			<view class="around">
				<view class="flex-box flex-between title">
					<view class="fs34 fwb">周边配套</view>
					<view @tap="jumpToMap" class="navigator" hover-class="none">查看地图+
					</view>
				</view>
				<image @tap="jumpToMap" :src="house_info.mapimg" class="aroundmap"></image>
				<view @tap="jumpToMap" class="flex-box trafficbox">
					<view class="flex-grow-1 tc">
						<image src="/static/icon/icon_around3.png" class="traffic"></image>
						<view>
							学校
							<text>({{ house_info.nearby_school_num }})</text>
						</view>
					</view>
					<view class="flex-grow-1 tc">
						<image src="/static/icon/icon_around4.png" class="traffic"></image>
						<view>
							购物
							<text>({{ house_info.nearby_shop_num }})</text>
						</view>
					</view>
					<view class="flex-grow-1 tc">
						<image src="/static/icon/icon_around5.png" class="traffic"></image>
						<view>
							医疗
							<text>({{ house_info.nearby_hospital_num }})</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<template v-if="appoint_type == 1 && appoint_subscribe_type == 2">
					<view class="fs40 black tc mb20">订阅楼盘开盘通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>楼盘总是悄无声息的开盘？</view>
						<view>一键订阅，让您抢占买房先机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 1">
					<view class="fs40 black tc mb20">订阅价格变动通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 3">
					<view class="fs40 black tc mb20">订阅实时动态通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 3 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">免费专车看房</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>公交太累，打车太贵，看房团还要等位</view>
						<view>佳和房产带您免费专车看房，省时，省力，还包来回！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 2 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">我要咨询</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>{{consults}}</view>
					</view>
				</template>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun"
						:value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码"
						placeholder-style="color:#ccc;" /></view>
				<view @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
		<!-- 弹出微信号 start-->
		<u-popup :show="wechatStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeWeChatStatus">
			<view class="reserve">
				<view class="title1">咨询师微信号</view>
				<view class="title2">{{ wechatnum }}</view>
				<button class="reserve-btn2" @tap="closeWeChatStatus">复制</button>
			</view>
		</u-popup>
		<!-- 弹出微信号 end -->
	</view>
	<view v-else>
		<u-loading-page loading-color="#000000" loading-text="loading..."></u-loading-page>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				domain:'',
				has_change:false,
				btnStatus: false,

				markers: [],
				nindex: 0,

				//默认选中周边设施 公交
				id: 0,

				// 房源信息
				house_info: null,

				// 排行信息
				rank_data: [],

				// 推荐咨询师信息
				broker_data: [],

				// 户型
				layout_info: null,

				// 楼栋信息
				building_info: null,

				// 动态信息
				trends_info: null,

				// 楼市头条
				article_info: null,

				// 用户点评
				user_comment_info: null,

				// 咨询师点评
				broker_comment_info: null,

				// 推荐房源
				recommend_data: [],

				// 问答专区
				question_data: [],

				//当前轮播图下标
				swiperCurrent: 0,

				// 预约订阅类型
				appoint_type: 1,

				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,

				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',

				appoint_mobile_text: '',
				broker_user_id: 0,
				isLoading: true,

				// 判断是否尚在加载中
				article: '',

				// 内容数据
				showall: false,

				//展开全文（周边设施）
				showcon: false,

				//展开全文（咨询师）
				newhouseindex: 1,

				//佳和房产新房
				popupStatus: false,

				//订阅咨询预约弹窗
				reserveStatus: false,

				//预约成功弹窗
				popupStatus1: false,

				//专车看房弹窗
				popupStatus2: false,

				//我要咨询弹窗
				popupStatus3: false,

				//订阅价格变动通知弹窗
				all_img_arr: [],

				user: {
					avatar: '',
					nickname: '',
					service_num: '',
					id: ''
				},

				name: '',
				createtime_text: '',
				content: '',
				show_date: '',
				
				bid:1,
				swiperBtns:[
					{
						id:1,
						title:'视频',
					},
					// {
					// 	id:4,
					// 	title:'视频2',
					// },
					{
						id:5,
						title:'效果图',
					},
					{
						id:2,
						title:'区位图',
					},
					{
						id:3,
						title:'楼栋分布图',
					},
				],
				consults:'',
				wechatnum:'',
				wechatStatus:false,
			};
		},
		onLoad: function(options) {
			let that = this;
			this.id = options.id || 0
			// 扫小程序码获得数据
			functions.handlePid('house', options, function(id) {
				if (id) {
					that.id = id
				}
				that.initData();
			});

		},
		onShow: function() {
			this.domain = app.globalData.web_url;
			if(this.has_change){
				this.initData();
				this.has_change=false;
			}
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onShareAppMessage: function() {
			var info = this.house_info;
			return {
				title: info.name,
				path: '/pages/house/building_detail_news/building_detail_news?id=' + info.id + '&isShare=1',
				imageUrl: info.images_arr.length > 0 ? info.images_arr[0] : ''
			};
		},
		
		methods: {
			//微信弹框
			jumpToPop(e){
				this.wechatnum = e.currentTarget.dataset.wechatnum || 0;
				console.log(this.wechatnum)
				this.wechatStatus=true;
				
			},
			// 图片预览
			previewImghx(e) {
				console.log(e.images_arr)
				uni.previewImage({
					current: e.images_arr[0],
					// 当前显示图片的http链接
					urls: [e.images_arr[0]] // 需要预览的图片http链接列表
				});
			},
			
			closeWeChatStatus() {
				
				uni.setClipboardData({
				  data: this.wechatnum,
				  success: () => {
					console.log('复制成功');
				  },
				  fail: (err) => {
					console.log('复制失败', err);
				  }
				});
				this.wechatStatus = false;
			},
			
			btnTap(obj){
				console.log(obj)
				this.bid = obj.id;
				console.log(this.bid)
			},

			changeMarkers() {
				var that = this;
				var nindex = Number(this.nindex);
				var arr = [];


				switch (nindex) {
					case 0:
						arr = that.house_info.nearby_bus_json_arr;
						break;

					case 1:
						arr = that.house_info.nearby_subway_json_arr;
						break;

					case 2:
						arr = that.house_info.nearby_school_json_arr;
						break;

					case 3:
						arr = that.house_info.nearby_shop_json_arr;
						break;

					case 4:
						arr = that.house_info.nearby_hospital_json_arr;
						break;

					default:
						break;
				}

				var markersArr = [];

				for (let index = 0; index < arr.length; index++) {
					const element = arr[index];
					markersArr.push({
						id: index,
						latitude: element.lat,
						longitude: element.lng,
						iconPath: '/static/icon/icon_map-none.png',
						callout: {
							content: element.name,
							color: '#000',
							fontSize: 14,
							borderWidth: 2,
							borderRadius: 10,
							borderColor: '#fff',
							bgColor: '#fff',
							padding: 5,
							display: 'ALWAYS',
							textAlign: 'center'
						}
					});
				}
				console.log('改变marker值', markersArr);
				this.markers = markersArr
			},

			shownear(e) {
				this.nindex = e.currentTarget.dataset.nearindex
				this.changeMarkers();
			},

		
			lookVideo(num) {
				
				console.log(this.house_info.vr_url)
				if(num==1){
					uni.navigateTo({
						url:'/pages/webview/video?url='+ this.house_info.video_one_url
					})
				}else{
					uni.navigateTo({
						url:'/pages/webview/video?url='+ this.house_info.video_two_url
					})
				}
			},
			// 图片预览
			previewImgTop(e) {
				let urls = e.currentTarget.dataset.url;
				uni.previewImage({
					current: urls,
					urls: [urls] // 需要预览的图片http链接列表
				});
			},
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},

			swiperChange: function(e) {
				this.swiperCurrent = e.detail.current
			},

			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;

				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}

				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						functions.jumpToChat(uid, that.house_info.id);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 跳转到大图展示页面
			jumpToImgShow: function() {
				app.globalData.pagesParamImagesArr = this.house_info.images_arr2;
				uni.navigateTo({
					url: '/pages/house/showimg/showimg'
				});
			},

			jumpToDetailMore: function() {
				app.globalData.pagesParamHouseInfo = this.house_info;
				uni.navigateTo({
					url: '/pages/house/building_detail_more/building_detail_news_more'
				});
			},

			jumpToMap: function() {
				// #ifdef H5
				location.href = 'https://uri.amap.com/marker?position=' + this.house_info.lng + ',' + this.house_info
					.lat + '&name=' + this.house_info.name + '&src=mypage&coordinate=gaode&callnative=0'
				// #endif
				// #ifndef H5
				app.globalData.pagesParamHouseInfo = this.house_info;
				uni.navigateTo({
					url: '/pages/house/surround_facility/surround_facility?type=0'
				});
				// #endif
			},

			jumpToComment: function() {
				app.globalData.pagesParamHouseInfo = this.house_info;
				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						uni.navigateTo({
							url: '/pages/house/comment/comment?house_id=' + that.id,
							events: {
								// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
								acceptDataFromOpenedPage: function(data) {
									that.initData();
								}
							}
						});
					} else {
						functions.toast('请先登录');
					}
				});
			},

			jumpToCommentList() {
				var that = this;
				app.globalData.pagesParamHouseInfo = this.house_info;
				uni.navigateTo({
					url: '/pages/house/user_comments/user_comments?house_id=' + that.id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							that.initData();
						}
					}
				});
			},

			jumpToQuestion: function() {
				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						uni.navigateTo({
							url: '/pages/article/want_ask1/want_ask1?house_id=' + that.id +
								'&house_name=' + that.house_info.name
						})
					} else {
						functions.toast('请先登录');
					}
				});
			},

			jumpToQuestionList() {
				var that = this;
				app.globalData.pagesParamHouseInfo = this.house_info;
				uni.navigateTo({
					url: '/pages/article/asklist/asklist?house_id=' + that.id + '&house_name=' + that.house_info
						.name,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							that.initData();
						}
					}
				});
			},

			//收藏或取消收藏
			collect() {
				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/collect_house', {
								house_id: that.id,
								type: 1
							},
							function(res) {
								that.house_info.is_collect = !that.house_info.is_collect
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 点赞
			likeComment(e) {
				var index = e.currentTarget.dataset.index;
				var type = e.currentTarget.dataset.type;

				if (type == 1) {
					var data = this.user_comment_info.comment_data;
				} else {
					var data = this.broker_comment_info.comment_data;
				}

				var now_info = data[index];

				if (now_info.is_like) {
					return false;
				}

				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/like_comment', {
								id: now_info.id
							},
							function(res) {
								data[index].is_like = true;
								data[index].like_num = 1 + Number(now_info.like_num);

								if (type == 1) {
									that.user_comment_info.comment_data = data
								} else {
									that.broker_comment_info.comment_data = data
								}
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 添加预约记录
			addAppointLog(e) {
				var uid = e.currentTarget.dataset.uid || 0;

				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}
				this.appoint_type = e.currentTarget.dataset.type;
				this.appoint_subscribe_type = e.currentTarget.dataset.subtype;
				this.broker_user_id = uid;
				// 处理手机号码
				this.appoint_mobile = uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus = true;
			},

			appoint_mobileFun(e) {
				this.appoint_mobile = e.detail.value
			},

			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
					functions.toast('请输入正确的手机号');
					return false;
				}
				functions.checkLogin(function(ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile = appoint_mobile;

						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log', {
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								house_id: that.house_info.id,
								prov: that.house_info.prov,
								city: that.house_info.city,
								region: that.house_info.region
							},
							function(res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' +
									appoint_mobile.substr(7);
								that.reserveStatus = true;
								that.popupStatus = false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			lookVr(url){
			
				uni.navigateTo({
					url:'/pages/webview/webview?url='+ url
				})
			},
			closePopupStatus() {
				this.popupStatus = false;
			},
			closeReserveStatus() {
				this.reserveStatus = false;
			},

			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},

			//展开全文
			showall_fuc() {
				this.showall = !this.showall
			},

			//展开全文
			showcon_fuc() {
				this.showcon = !this.showcon
			},

			//佳和房产新房
			shownewhouse(index) {
				this.newhouseindex = index
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				this.special_mobile = uni.getStorageSync('mobile')

				// 获取---通用类-咨询
				functions.getAjaxData(
					'/api/xiluhouse/universal/advert_data', {
						position_type: 2 
					},
					function(res) {
						var data1 = []; // 判断首页悬浮窗的显示
						console.log(res.data);
						that.consults = res.data.consult;
					}
				);
				
				functions.getAjaxData(
					'/api/xiluhouse/house/house_detail', {
						id: that.id
					},
					function(res) {
						that.article = res.data.house_info.content
						app.globalData.pagesParamHouseInfo = res.data.house_info;
						var all_img_arr = [];
						res.data.user_comment_info.comment_data.forEach((element) => {
							var images_arr = element.images_arr;
							images_arr.forEach((element2) => {
								all_img_arr.push(element2);
							});
						});
						res.data.broker_comment_info.comment_data.forEach((element) => {
							var images_arr = element.images_arr;
							images_arr.forEach((element2) => {
								all_img_arr.push(element2);
							});
						});
						that.all_img_arr = all_img_arr;
						that.house_info = res.data.house_info;
						that.rank_data = res.data.rank_data;
						that.layout_info = res.data.layout_info;
						that.building_info = res.data.building_info;
						that.trends_info = res.data.trends_info;
						that.article_info = res.data.article_info;
						that.user_comment_info = res.data.user_comment_info;
						that.broker_comment_info = res.data.broker_comment_info;
						that.recommend_data = res.data.recommend_data;
						that.broker_data = res.data.broker_data;
						that.question_data = res.data.question_data
						that.changeMarkers();
					}
				);
			},
			
		}
	}
</script>

<style lang="scss">
	
	.house-ban{
		width:100%;
		height:563rpx;
		overflow:hidden;
	}
	.house-ban image{
		width:100%;
		height:563rpx;
		display:block;
	}
	
	
	.trafficbox .active {
		color: #0091ff;
	}

	.coloractive {
		color: #0091ff;
	}

	.compicbox .compic {
		width: calc((100% - 30rpx) / 3);
		height: 200rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.compicbox .compic:nth-of-type(3n) {
		margin-right: 0;
	}

	.orange {
		color: #ff7b40;
	}

	.swiper {
		width: 100%;
		height: 563rpx;
		position: relative;
		z-index: 1;
	}

	.swiper image {
		width: 100%;
	}

	.swiper-dots {
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		z-index: 2;
	}

	.swiper-dots .swiper-dot {
		width: 8rpx;
		height: 8rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50px;
		margin: 0 3rpx;
	}

	.swiper-dots .swiper-dot.active {
		width: 12rpx;
		background: rgba(255, 255, 255, 1);
	}

	.swiper-box {
		position: relative;
	}

	.swipernum {
		position: absolute;
		right: 40rpx;
		bottom: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50rpx;
		z-index: 2;
		color: #fff;
		width: 70rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: var(--fs24);
	}

	.buildinfo {
		padding: 30rpx 40rpx 62rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.buildinfo .title {
		font-size: var(--fs34);
		line-height: 45rpx;
		padding-bottom: 13rpx;
	}

	.buildinfo .collect {
		padding: 0 30rpx;
		text-align: center;
		border-left: 1px solid #ccc;
	}

	.buildinfo .icon_collect {
		width: 30rpx;
		height: 30rpx;
		margin-bottom: 3rpx;
	}

	.buildinfo .infoleft {
		// width: 172rpx;
		width: auto;
		text-align: right;
		color: #898989;
		padding-right: 30rpx;
		flex-shrink:0;
	}

	.buildinfo .price {
		color: #f8532f;
		font-size: var(--fs30);
	}

	.buildinfo .price text {
		font-size: var(--fs24);
	}

	.buildinfo .icon_tips {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.buildinfo .priceintro {
		font-size: var(--fs24);
		color: #ccc;
		padding-left: 55rpx;
	}

	.buildinfo .title_collect {
		padding-bottom: 23rpx;
	}

	.buildinfo .title_collect .area-size {
		font-size: var(--fs28);
		color: #898989;
		margin-bottom:15rpx;
	}


	.buildinfo .infoitem {
		padding-bottom: 10rpx;
	}

	.buildinfo .total {
		font-size: var(--fs34);
	}

	.buildinfo .event {
		padding-top: 11rpx;
		font-size: var(--fs36);
		color: #898989;
	}

	.buildinfo .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00C4FF, var(--blue));
		color: #fff;
		margin-right: 10rpx;
	}

	.buildinfo .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #FF6635, #FFB45C);
		color: #fff;
		margin-right: 10rpx;
	}

	.buildinfo .showdetail {
		color: var(--blue);
		padding: 40rpx 0;
		text-align: center;
	}

	.buildinfo .getinfo {
		width: 315rpx;
		height: 90rpx;
		border-radius: 5rpx;
		background: #f6f7fa;
		color: var(--blue);
		font-weight: 400;
	}

	.buildinfo .getinfo .icon_getinfo1 {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.buildinfo .getinfo .icon_getinfo2 {
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.buildinfo .hotsale {
		height: 90rpx;
		border-radius: 8rpx;
		background: linear-gradient(270deg, #F7DBA3, #FFF2DC);
		margin-top: 50rpx;
		padding: 0 20rpx;
		color: #53421c;
	}

	.buildinfo .bang {
		width: 52rpx;
		color: #fff;
		text-align: center;
		line-height: 52rpx;
		height: 52rpx;
		border-radius: 8rpx;
		background: #ff8941;
		margin-right: 20rpx;
	}

	.buildinfo .icon_r {
		width: 26rpx;
		height: 26rpx;
	}

	.discountbox {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.title {
		padding: 0 0 33rpx;
		font-size: var(--fs34);
		color: #101010;
	}

	.title .navigator {
		font-size: var(--fs24);
		color: #898989;
		height: 46rpx;
		line-height: 46rpx;
	}

	.discountbox .discount {
		height: 120rpx;
		border-radius: 15rpx;
		color: var(--blue);
		background: #E5F2FC;
		padding: 0 20rpx 0 30rpx;
	}

	.discountbox .discount .btn1 {
		width: 100rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background: #ff7b40;
		color: #fff;
		font-size: var(--fs20);
		text-align: center;
		line-height: 40rpx;
	}

	.discountbox .discount .btn2 {
		width: 100rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background: var(--blue);
		color: #fff;
		font-size: var(--fs20);
		text-align: center;
		line-height: 40rpx;
		margin-left: 20rpx;
	}

	.agentbox {
		padding: 40rpx 40rpx 20rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.contact {
		padding: 0 0 40rpx 0;
	}

	.icon_avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.contact button.conbtn {
		width: 70rpx;
		height: 70rpx;
		padding: 0;
		margin: 0 0 0 30rpx;
	}

	.contact .conbtn image {
		width: 70rpx;
		height: 70rpx;
	}

	.housetype {
		padding: 40rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.housetype .typeitem {
		padding-bottom: 30rpx;
	}

	.housetype .imgebox {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		border: solid 1px #f4f3f3;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.housetype .imgebox image {
		width: 240rpx;
		height: 190rpx;
	}

	.housetype .compete {
		font-size: var(--fs24);
		color: #898989;
	}

	.housetype .compete text {
		color: #F8532F;
	}

	.footbox button.contactkefu {
		width: 100%;
		height: 150rpx;
		border-radius: 15px;
		position: relative;
		padding-left: 150rpx;
		color: var(--blue);
	}

	.footbox .kefubg {
		position: absolute;
		width: 670rpx;
		height: 150rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.footbox .contactkefu .tel {
		width: 90rpx;
		height: 90rpx;
	}


	.dynamiclist .dynamicitem {
		padding-left: 30rpx;
		position: relative;
		padding-bottom: 40rpx;
	}

	.dynamiclist .dynamicitem::before {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		background-color: #f4f3f3;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.dynamiclist .dynamicitem .time {
		font-size: var(--fs24);
		color: #898989;
		padding-left: 20rpx;
	}

	.dynamiclist .dynamicitem .title {
		font-size: var(--fs32);
		padding: 35rpx 0 0;
		font-weight: 400;
		padding-bottom: 18rpx;
	}

	.dynamiclist .dynamicitem .detail {
		line-height: 39rpx;
	}

	.dynamiclist .dynamicitem .dyname {
		width: 80rpx;
		height: 41rpx;
		text-align: center;
		line-height: 41rpx;
		text-align: center;
		color: #fff;
		font-size: var(--fs24);
		border-radius: 10rpx 0 10rpx 0;
	}

	.dynamiclist .dynamicitem .dyname::before {
		content: "";
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		position: absolute;
		left: -1%;
		top: 17rpx;
	}


	.dynamiclist .dynamicitem:nth-of-type(1) .dyname {
		background: linear-gradient(270deg, #FFB45C, #FF6635);
	}

	.dynamiclist .dynamicitem:nth-of-type(1) .dyname::before {
		background: linear-gradient(270deg, #FFB45C, #FF6635);
	}

	.dynamiclist .dynamicitem:nth-of-type(1)::before {
		height: 90%;
	}

	.dynamiclist .dynamicitem:last-child::before {
		height: 90%;
		bottom: 30rpx;
	}

	.dynamiclist .dynamicitem:nth-of-type(2) .dyname {
		background: linear-gradient(270deg, #93EB32, #7AC528);
	}

	.dynamiclist .dynamicitem:nth-of-type(2) .dyname::before {
		background: linear-gradient(270deg, #93EB32, #7AC528);
	}

	.dynamiclist .dynamicitem:nth-of-type(3) .dyname {
		background: linear-gradient(270deg, #FF8897, #FE6075);
	}

	.dynamiclist .dynamicitem:nth-of-type(3) .dyname::before {
		background: linear-gradient(270deg, #FF8897, #FE6075);
	}

	.dynamiclist .dynamicitem:nth-of-type(4) .dyname {
		background: linear-gradient(270deg, #00C4FF, var(--blue));
	}

	.dynamiclist .dynamicitem:nth-of-type(4) .dyname::before {
		background: linear-gradient(270deg, #00C4FF, var(--blue));
	}

	.getinfo2 {
		// width: 670rpx;
		height: 100rpx;
		border-radius: 15rpx;
		background: #f6f7fa;
		margin-bottom: 60rpx;
		color: var(--blue);
		font-size: var(--fs30);
		margin: 60rpx 0;
	}

	.getinfo2 image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.infopic {
		width: 670rpx;
		height: 380rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.infopic image {
		width: 670rpx;
		height: 380rpx;
	}

	.trafficbox {
		border-bottom: 1px solid #f4f3f3;
		padding-bottom: 40rpx;
	}

	.around {
		padding: 40rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.aroundmap {
		width: 100%;
		height: 280rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 8;
	}

	.traffic {
		width: 52rpx;
		height: 52rpx;
		margin: 40rpx 0 15rpx;
	}

	.intro {
		padding-top: 40rpx;
	}

	.intro .avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.intro .introduce {
		line-height: 44rpx;
	}

	.intro .introduce.showall {
		height: auto;
		overflow: visible;
	}

	.tirpple-line {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.buliding-detail {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.buliding-detail .title {
		font-size: var(--fs32);
	}

	.detailitem {
		line-height: 44rpx;
		color: #898989;
	}

	.detailitem .content text {
		float: left;
	}

	.hot {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.read {
		line-height: 15rpx;
	}

	.time-read {
		padding-top: 20rpx;
	}

	.comment {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.comment .useritem {
		padding-bottom: 40rpx;
	}

	.comment .icon_avatar {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.comment .comdetail {
		padding: 16rpx 0;
	}

	.comment .icon_zan {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.comment .getinfo2 {
		margin: 60rpx 0 0;
	}

	.comment .consultcom .name {
		font-size: var(--fs34);
		padding-bottom: 13rpx;
	}

	.comment .consultcom .professor {
		font-size: var(--fs24);
		color: #898989;
	}

	.comment .consultcom .phone {
		padding: 14rpx 26rpx;
		font-size: var(--fs24);
		color: var(--blue);
		border-radius: 8rpx;
		margin: 0;
		background-color: #E5F4FF;
		width: 150rpx;
	}

	.comment .consultcom .detail {
		line-height: 44rpx;
		margin: 30rpx 0 20rpx;
		height: auto;
		overflow: visible;
	}

	.comment .consultcom .detail.m-ellipsis-l3 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.newhouse {
		padding: 40rpx 40rpx 60rpx;
		border-bottom: 20rpx solid #f6f7fa;
	}

	.newhouse .newpic {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #E5F4FF;
		margin: 0 auto 24rpx;
	}

	.newhouse .newpic image {
		width: 48rpx;
		height: 49rpx;
	}

	.newhouse .newbox {
		border-radius: 15rpx;
		padding: 22rpx 20rpx;
		margin-top: 35rpx;
		position: relative;
		background: #f6f7fa;
	}

	.newhouse .newbox::after {
		content: "";
		display: block;
		position: absolute;
		top: -22rpx;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-top: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 15rpx solid #f6f7fa;
		border-left: 15rpx solid transparent;
	}

	.newhouse .newbox1::after {
		left: 17%;
	}

	.newhouse .newbox2::after {
		left: 50%;
	}

	.newhouse .newbox3::after {
		left: 83%;
	}

	.wantconsult {
		width: 150rpx;
		color: var(--blue);
		text-align: center;
		line-height: 50rpx;
		height: 50rpx;
		border-radius: 30rpx;
		border: solid 1px var(--blue);
		font-size: var(--fs24);
	}

	.alsolookfor {
		padding: 40rpx 40rpx 0;
	}

	.alsolookfor .houseimg {
		width: 240rpx;
		height: 190rpx;
		overflow: hidden;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.alsolookfor .houseimg image {
		width: 240px;
		height: 190rpx;
	}

	.alsolookfor .housename {
		font-size: var(--fs30);
	}

	.alsolookfor .placesize {
		font-size: var(--fs24);
		color: #898989;
		padding: 12rpx 0 14rpx;
	}

	.alsolookfor .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: var(--fs18);
		color: var(--blue);
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.alsolookfor .price {
		color: #f8532f;
	}

	.alsolookfor .price text {
		font-size: var(--fs34);
	}

	.alsolookfor .houseitem {
		margin-bottom: 30rpx;
	}

	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
		padding:0 40rpx;
		box-sizing:border-box;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: var(--fs32);
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: var(--fs30);
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: var(--fs30);
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}


	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: var(--fs24);
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: var(--fs24);
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
		border-top: 1px solid #f6f7fa;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
		padding: 0 40rpx;
	}

	.pop {
		width: 100%;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
	}

	.pop .pop-title1 {
		padding: 20rpx 0 0;
		text-align: center;
		font-size: var(--fs40);
	}

	.pop .pop-title2 {
		padding: 23rpx 0 40rpx;
		text-align: center;
		font-size: var(--fs30);
		color: #333;
		line-height: 42rpx;
	}

	.pop .pop-input {
		height: 90rpx;
		padding: 0 30rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		font-size: var(--fs30);
	}

	.pop .pop-btn1 {
		height: 90rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		width: 100%;
		color: #fff;
		font-size: var(--fs30);
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop .pop-btn2 {
		height: 90rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
		width: 100%;
		color: #fff;
		font-size: var(--fs30);
		font-weight: normal;
		margin-top: 40rpx;
		margin-left: 0;
		margin-right: 0;
		line-height: 90rpx;
		padding: 0;
	}

	.pop-title3 {
		padding: 20rpx 30rpx 0;
		color: #898989;
		font-size: var(--fs24);
	}


	.custom-class {
		border-radius: 8rpx;
		overflow: hidden;
	}


	.quesitem {
		padding-bottom: 30rpx;
	}

	.quesitem .asktitle {
		padding-left: 46rpx;
		position: relative;
	}

	.quesitem .asktitle::before {
		content: "问";
		display: block;
		color: #fff;
		width: 35rpx;
		height: 35rpx;
		border-radius: 10rpx;
		background: linear-gradient(180deg, #00C4FF 0%, var(--blue) 100%);
		position: absolute;
		top: 0;
		left: 0;
		font-size: var(--fs20);
		text-align: center;
		line-height: 35rpx;
	}

	.quesitem .solve {
		width: 80rpx;
		height: 35rpx;
		text-align: center;
		line-height: 35rpx;
		background-color: #f6f7fa;
		font-size: var(--fs20);
		color: #B8BDCA;
		border-radius: 8rpx;
	}
	
	.swiper-btns{
		width:auto;
		height:auto;
		overflow:hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		background:rgba(0,0,0,0.5);
		position:absolute;
		bottom:20rpx;
		left:40rpx;
		z-index:9;
		padding:5rpx;
		border-radius:50rpx;
		overflow:hidden;
		box-sizing:border-box;
	}
	.btn-itm{
		min-width:80rpx;
		height:40rpx;
		font-size:20rpx;
		color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		padding:0 15rpx;
		box-sizing:border-box;
		border-radius:40rpx;
		overflow:hidden;
	}
	.btn-act{
		color:#000;
		background:rgba(255,255,255,0.7)
	}
	
	
	.detail-one{
		width:100%;
		height:auto;
		overflow:hidden;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-direction: row;
		padding:10rpx 0 30rpx;
		box-sizing:border-box;
	}
	.de-one-item{
		width:auto;
		height:auto;
		overflow:hidden;
	}
	.de-one-red{
		width:auto;
		height:auto;
		line-height:40rpx;
		font-size:36rpx;
		font-weight:bold;
		color:#f8532f;
		overflow:hidden;
	}
	.de-one-title{
		width:auto;
		height:auto;
		line-height:30rpx;
		font-size:24rpx;
		color:#999;
		overflow:hidden;
		padding-top:10rpx;
	}
	
	.detail-two{
		width:100%;
		height:auto;
		overflow:hidden;
	}
	.de-two-view{
		width:100%;
		height:auto;
		overflow:hidden;
		padding:8rpx 0;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-direction: row;
		padding-right:20rpx;
		box-sizing:border-box;
	}
	.de-two-item{
		max-width:50%;
		width:100%;
		height:auto;
		overflow:hidden;
		padding:8rpx 0;
		display: flex;
		justify-content:flex-start;
		align-items: center;
		flex-direction: row;
	}
	.de-two-title{
		width:auto;
		height:auto;
		line-height:30rpx;
		font-size:28rpx;
		color:#999;
		overflow:hidden;
		flex-shrink:0;
	}
	.de-two-text{
		width:auto;
		height:auto;
		line-height:40rpx;
		font-size:28rpx;
		color:#000;
		overflow:hidden;
		padding-left:20rpx;
	}
	.de-two-more{
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-direction: row;
	}
	.de-two-more-icon{
		width:25rpx;
		height:25rpx;
		display:block;
		overflow:hidden;
	}
	
	.detail-three{
		width:100%;
		height:auto;
		overflow:hidden;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-direction: row;
		padding:10rpx 0 30rpx;
		box-sizing:border-box;
	}
	.de-three-item{
		width:auto;
		height:auto;
		overflow:hidden;
	}
	.de-three-bold{
		width:auto;
		height:auto;
		line-height:40rpx;
		font-size:36rpx;
		font-weight:bold;
		color:#f8532f;
		overflow:hidden;
	}
	.de-three-title{
		width:auto;
		height:auto;
		line-height:30rpx;
		font-size:24rpx;
		color:#999;
		overflow:hidden;
		padding-top:10rpx;
	}
	
	.info-view{
		width:100%;
		height:auto;
		overflow:hidden;
	}
	.info-item{
		color: #898989;
		font-size:28rpx;
		margin-right:30rpx;
		margin-bottom:10rpx;
		float:left;
	}
	.info-item text{
		color:#000;
		font-size:28rpx;
		margin-left:20rpx;
	}
</style>
